﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Display other widgets in jqxRibbon. Click on a Ribbon Tab to display its content.
    </title>
    <meta name="description" content="This demo shows how to integrate jqxRibbon with other widgets." />
    <link type="text/css" rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // "Main" grid
            var initiMainGrid = function () {
                var mainMessages = [{ from: "Anthony", subject: "Visit to the zoo", time: "09/10/2014 12:35" }, { from: "Peter", subject: "Job application", time: "08/23/2014 18:13" }, { from: "Sarah", subject: "The roses...", time: "08/05/2014 15:01"}];

                var mainSource =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'from', type: 'string' },
                        { name: 'subject', type: 'string' },
                        { name: 'time', type: 'date' }
                    ],
                    localdata: mainMessages
                };

                var mainDataAdapter = new $.jqx.dataAdapter(mainSource);

                $("#mainGrid").jqxGrid(
                {
                    width: '100%',
                    autoheight: true,
                    source: mainDataAdapter,
                    selectionmode: "checkbox",
                    columns: [
                        { text: 'From', datafield: 'from', width: 100 },
                        { text: 'Subject', datafield: 'subject', width: 200 },
                        { text: 'Time', datafield: 'time', cellsformat: 'MMM d h:mm tt' }
                    ]
                });
            };

            // "Social" grid
            var initiSocialGrid = function () {
                var socialMessages = [{ from: "PhotoPics.com", subject: "Join us today!", time: "09/08/2014 11:00" }, { from: "CookMaster", subject: "Welcome to the CookMaster forum.", time: "08/29/2014 22:33"}];

                var socialSource =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'from', type: 'string' },
                        { name: 'subject', type: 'string' },
                        { name: 'time', type: 'date' }
                    ],
                    localdata: socialMessages
                };

                var socialDataAdapter = new $.jqx.dataAdapter(socialSource);

                $("#socialGrid").jqxGrid(
                {
                    width: '100%',
                    autoheight: true,
                    source: socialDataAdapter,
                    selectionmode: "checkbox",
                    columns: [
                        { text: 'From', datafield: 'from', width: 100 },
                        { text: 'Subject', datafield: 'subject', width: 240 },
                        { text: 'Time', datafield: 'time', cellsformat: 'MMM d h:mm tt' }
                    ]
                });
            };

            $("#jqxRibbon").jqxRibbon({ width: 800, position: "top", selectionMode: "click", animationType: "none",
                initContent: function (index) {
                    switch (index) {
                        case 0:
                            initiMainGrid();
                            break;
                        case 1:
                            initiSocialGrid();
                            break;
                        case 2:
                            $("#refreshButton").jqxButton({ width: 25, height: 25 });
                            break;
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div style="box-sizing: border-box; width: 800px; border-top-left-radius: 5px; border-top-right-radius: 5px;
        padding-left: 10px; background-color: #1C3672; color: White; font-size: large;">
        <img src="../../jqwidgets/styles/images/mail.png" style="margin-right: 10px; display: inline-block;
            vertical-align: bottom;" /><div style="display: inline-block; font-weight: bold;">
                Inbox</div>
    </div>
    <div id="jqxRibbon">
        <ul style="border-top-left-radius: 0; border-top-right-radius: 0;">
            <li style="margin-left: 30px;">Main</li>
            <li>Social</li>
            <li>Promotions</li>
        </ul>
        <div>
            <div>
                <div id="mainGrid" style="margin-top: 5px; border-bottom: none; border-left: none;
                    border-right: none;">
                </div>
            </div>
            <div>
                <div id="socialGrid" style="margin-top: 5px; border-bottom: none; border-left: none;
                    border-right: none;">
                </div>
            </div>
            <div>
                <table style="width: 100%;">
                    <tr>
                        <td style="text-align: center;">
                            No new mail under <em>Promotions</em>.<br />
                            <button id="refreshButton" title="Refresh">
                                <img src="../../images/refresh.png" /></button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
